<template>
	<div class="menus">
		<ul class="ul">
			<li class="item">
				<items :items="item.children" />
			</li>
		</ul>
	</div>
</template>
<script>
import Items from './items.vue';
export default {
	name: 'menus',
	components: {
		Items,
	},
	data() {
		return {
			menus: [
				{
					id: 1,
					title: '分类1',
					children: [
						{
							id: '1-1',
							title: '分类1-1',
						},
						{
							id: '1-2',
							title: '分类1-2',
						},
						{
							id: '1-3',
							title: '分类1-3',
						},
					],
				},
				{
					id: 2,
					title: '分类2',
					children: [
						{
							id: '2-1',
							title: '分类2-1',
						},
						{
							id: '2-2',
							title: '分类2-2',
						},
						{
							id: '2-3',
							title: '分类2-3',
						},
					],
				},
				{
					id: 3,
					title: '分类3',
					children: [
						{
							id: '3-1',
							title: '分类3-1',
						},
						{
							id: '3-2',
							title: '分类3-2',
						},
						{
							id: '3-3',
							title: '分类3-3',
						},
					],
				},
			],
		};
	},
};
</script>
<style>
.ul {
	display: flex;
	flex-direction: column;
}
</style>
